<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        @import url("3.css");
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#data tr").click(function () {
                trClick($(this));
            });
        });

        //单击表格变色
        let colorTr = null;
        function trClick(trObj) {
            if(colorTr != null){
                colorTr.css("backgroundColor","white");
            }
            trObj.css({"backgroundColor":"yellow"});
            colorTr = trObj;
            $("#delButton").prop("disabled",false);

            let tdArray = colorTr.find("td");
            $("#name").val(tdArray[0].innerHTML);
            $("#job").val($(tdArray[1]).html());
            $("#money").val($(tdArray[2]).html());
        }
        //删除
        function del() {
            //从父元素中移除元素
            colorTr.remove();
            $("#delButton").prop("disabled",true);
        }

        // 删除所有
        function delAll() {
            // $("#data").html("");
            $("#data tr").remove();
        }

        //添加
        function add() {
            let trObj = $("<tr><td>"+$("#name").val()+"</td><td>"+$("#job").val()+"</td><td>"+$("#money").val()+"</td></tr>");
            trObj.click(function () {
                trClick($(this));
            });
            $("#data").append(trObj);
        }

        //修改
        function update() {
            let tdArray = colorTr.find("td");
            tdArray[0].innerHTML = $("#name").val();
            $(tdArray[1]).html($("#job").val());
            $(tdArray[2]).html($("#money").val());
        }
    </script>
</head>
<body>
<div id="contentDiv">
    <table border="1" cellspacing="0" width="40%">
        <thead><tr><th>姓名</th><th>职位</th><th>工资</th></tr></thead>

        <tbody id="data">
        <tr><td>张无忌</td><td>经理</td><td>12000</td></tr>
        <tr><td>谢逊</td><td>科长</td><td>10000</td></tr>
        <tr><td>杨逍</td><td>部长</td><td>15000</td></tr>
        <tr><td>范遥</td><td>会计</td><td>6000</td></tr>
        <tr><td>韦一笑</td><td>清洁工</td><td>3000</td></tr>
        </tbody>
    </table>



    <div id="inputDiv">
        姓名：<input type="text" id="name"><br>
        职位：<input type="text" id="job"><br>
        工资：<input type="text" id="money"><br>
        <input type="button" value="添加" onclick="add()">
        <input type="button" value="删除" onclick="del()" disabled id="delButton">
        <input type="button" value="删除所有" onclick="delAll()">
        <input type="button" value="修改" onclick="update()">
    </div>
</div>
</body>
</html>